<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>捕鱼小游戏 - Vue版</title>
    <!-- 在线引入vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="game.css">

    </style>
  </head>
  <body>
    <div id="app">
      <!-- 开始游戏界面 -->
      <div
        class="start-screen"
        v-if="showStartScreen"
      >
        <h1 class="game-title">捕鱼小游戏</h1>

        <button
          class="start-button"
          @click="startGame"
        >
          开始游戏
        </button>
      </div>
      <canvas
        id="gameCanvas"
        ref="canvas"
      ></canvas>
      <!-- 奖励事件倒计时 -->
      <div
        class="reward-event-timer"
        v-show="showRewardTimer && gameStarted"
      >
        <span class="timer-text">下一次奖励:</span>
        <span class="timer-value">{{ formatTime(rewardEventTimeLeft) }}</span>
      </div>
      <!-- 宝箱倒计时 -->
      <div
        v-if="treasureChest"
        class="treasure-chest-timer"
        :style="{ left: treasureChest.x + 'px', top: (treasureChest.y - 40) + 'px' }"
      >
        宝箱倒计时: {{ formatTime(treasureChestTimeLeft) }}
      </div>
      <div class="game-ui">
        <div class="controls">
          <button
            class="btn"
            @click="togglePause"
            v-if="!gameOver"
          >
            {{ isPaused ? '继续' : '暂停' }}
          </button>
          <button
            class="btn"
            @click="restartGame"
          >
            重新开始
          </button>
          <button
            class="btn"
            @click="showInfo"
          >
            游戏说明
          </button>
        </div>
      </div>
      <!-- 子弹选择器 -->
      <div
        class="bullet-selector"
        v-if="gameStarted"
      >
        <div
          v-for="(type, key) in bulletTypes"
          :key="key"
          class="bullet-option"
          :class="{ active: bulletType === key, disabled: key === 'energy' && coins < 50 }"
          @click="switchBulletType(key)"
        >
          <div class="bullet-name">{{ type.name }}</div>
          <div class="bullet-cost">{{ type.cost }}</div>
        </div>
      </div>
      <div
        class="progress-container"
        v-if="gameStarted"
      >
        <div>等级 {{ level }} - {{ fishCaught }}/{{ fishRequired }}</div>
        <div class="progress-bar">
          <div
            class="progress-fill"
            :style="{ width: (fishCaught / fishRequired) * 100 + '%' }"
          ></div>
        </div>
      </div>
      <div
        class="cannon-charge"
        :class="{ show: isCharging }"
      >
        <div
          class="charge-fill"
          :style="{ width: chargePercent + '%' }"
        ></div>
      </div>
      <!-- 统计面板 - 重构版本 -->
      <div
        class="stats-panel"
        :class="{ collapsed: !statsExpanded }"
        v-if="gameStarted"
      >
        <div
          class="stats-header"
          @click="toggleStats"
        >
          <h3>游戏信息</h3>
          <div class="stats-toggle">▲</div>
        </div>
        <!-- 主要信息 - 始终显示 -->
        <div class="stats-primary">
          <div class="stat-primary-item">
            <span class="stat-label">金币:</span>
            <span class="stat-value">{{ coins }}</span>
          </div>
          <div class="stat-primary-item">
            <span class="stat-label">炮弹:</span>
            <span class="stat-value">{{ cannonBalls }}</span>
          </div>
        </div>
        <!-- 详细信息 - 可折叠 -->
        <div
          class="stats-details"
          v-show="statsExpanded"
        >
          <div class="stat-item">
            <span class="stat-label">得分:</span>
            <span class="stat-value">{{ score }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">子弹弹速:</span>
            <span class="stat-value">+{{ bulletSpeedBonus }}%</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">倍率加成:</span>
            <span class="stat-value">{{ (multiplierBonus * 100).toFixed(0) }}%</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">概率加成:</span>
            <span class="stat-value">+{{ probabilityBonus }}%</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">消耗减少:</span>
            <span class="stat-value">{{ costReduction }}%</span>
          </div>
        </div>
      </div>
      <div class="cards-area">
        <div
          v-for="(card, index) in activeCards"
          :key="index"
          class="active-card"
          :class="{ 'level-2': card.level === 2 }"
          @click="removeCard(index)"
        >
          <div class="card-icon">{{ getCardIcon(card.type) }}</div>
          <div class="card-value">{{ getCardValue(card) }}</div>
        </div>
      </div>
      <div
        class="reward-modal"
        :class="{ show: showRewardModal }"
      >
        <h2>选择一张奖励卡牌</h2>
        <div class="cards-container">
          <div
            v-for="(card, index) in rewardCards"
            :key="index"
            class="reward-card"
            :class="{ 'level-2': card.level === 2 }"
            @click="selectRewardCard(index)"
          >
            <div class="card-icon">{{ getCardIcon(card.type) }}</div>
            <div class="card-title">{{ getCardName(card.type) }}</div>
            <div class="card-value">{{ getCardValue(card) }}</div>
          </div>
        </div>
      </div>
      <!-- 宝箱奖励模态框 -->
      <div
        class="treasure-reward-modal"
        :class="{ show: showTreasureRewardModal }"
      >
        <h2>宝箱奖励</h2>
        <div class="treasure-card-container">
          <div
            v-if="treasureCard"
            class="treasure-card"
            :class="treasureCard.rarity"
            @click="claimTreasureReward"
          >
            <div class="treasure-card-icon">{{ treasureCard.icon }}</div>
            <div class="treasure-card-title">{{ treasureCard.name }}</div>
            <div class="treasure-card-value">{{ getTreasureCardValue(treasureCard) }}</div>
            <div class="treasure-card-description">{{ treasureCard.description }}</div>
          </div>
        </div>
      </div>
      <div
        class="swap-modal"
        :class="{ show: showSwapModal }"
      >
        <h2>卡牌已满</h2>
        <p>请选择一张卡牌进行替换</p>
        <div class="swap-buttons">
          <button
            class="btn"
            @click="confirmSwap"
          >
            确认替换
          </button>
          <button
            class="btn"
            @click="cancelSwap"
          >
            取消
          </button>
        </div>
      </div>
      <div
        class="game-over-modal"
        :class="{ show: gameOver }"
      >
        <h2>游戏结束</h2>
        <div class="final-score">最终得分: {{ score }}</div>
        <button
          class="btn"
          @click="restartGame"
        >
          再玩一次
        </button>
      </div>
      <div
        class="info-modal"
        :class="{ show: showInfoModal }"
      >
        <h2>游戏说明</h2>
        <div class="info-content">
          <p><strong>操作方式：</strong></p>
          <p>鼠标移动控制炮台方向</p>
          <p>鼠标点击发射子弹</p>
          <p>空格键按住蓄力炮弹</p>
          <p>点击底部切换子弹类型</p>
          <p><strong>游戏目标：</strong></p>
          <p>捕获鱼类获得金币和分数</p>
          <p>升级解锁更多奖励</p>
          <p>避免金币耗尽（注意每秒会消耗1金币）</p>
          <p><strong>宝箱事件：</strong></p>
          <p>每3分钟出现一次宝箱事件</p>
          <p>捕获宝箱可获得额外奖励</p>
        </div>
        <button
          class="btn close-btn"
          @click="hideInfo"
        >
          关闭
        </button>
      </div>
      <div
        class="insufficient-coins"
        :class="{ show: showInsufficientCoins }"
      >
        金币不足！
      </div>
    </div>
    <script src="game.js"></script>
    </script>
  </body>
</html>
